<template>
	<!-- 设计师 -->
	<view>
		<!-- gpt -->
		<view style="position: relative;">
			<view class="process flex  align-center justify-center" @click="toMission">
				<x-lottie style="width:70rpx;height:70rpx" :option="{
			                path:require('../../../static/json/a.json')
			}" />
				<view style="margin-left: 10rpx;">
					<view style="color:#333333 ; font-size: 28rpx;">共厂家居</view>
					<view style="margin-top: '5rpx';font-size:20rpx;">智能小助手</view>
				</view>
			</view>
		</view>
		<view style="position: relative;">
			<image src="../../../static/tabbar/designer.png" mode="aspectFit"
				style="width: 100vw;height: 488rpx;z-index: -1;"></image>
			<view style="margin-top:-10rpx;">
				<view class="flex justify-between reservationOne"
					style="border-bottom: 1rpx solid rgba(30, 30, 30, 0.1);" v-for="(item,index) in architectData"
					:key="index">
					<view style="line-height: 70rpx;margin-top: 15rpx;">
						<view style="font-size: 32rpx;">
							{{item.categoryName}}
						</view>
						<view style="font-size: 28rpx;color: rgba(30,30,30,0.3);">
							{{item.decorationTypeName}} <text style="margin-left: 30rpx;">{{item.area}}m²</text>
						</view>
						<view class="flex align-center justify-between" style="margin: 20rpx 0;">
							<image :src="item.userAvatar" style="width: 48rpx;height: 48rpx;border-radius: 50rpx;"
								mode="">
							</image>
							<view style="font-size: 24rpx;font-weight: 500;color: rgba(30,30,30,0.6);margin:0 10rpx;">
								{{item.userNick}}
							</view>
							<view class="flex align-center ">
								<view
									style="width: 8rpx;height: 8rpx;background: #00FF2B;border-radius: 12rpx;margin-right: 10rpx;">
								</view>
								<view class="status">
									业主当前在线
								</view>
							</view>
						</view>
					</view>
					<!-- @click="randomTask(item.id,item.userNick,item.userAvatar)" -->
					<view class="bePresent flex justify-between align-center">
						<image src="../../../static/tabbar/search.png" style="width: 48rpx;height: 48rpx;" mode="">
						</image>
						<text>立即报价</text>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view v-if="architectData == ''" style="padding: 30rpx;margin-top: 300rpx;">
			<image src="/clientEnd/static/kong.png" style="width: 236rpx;height: 236rpx; display: block;margin: auto;"
				mode=""></image>
			<view style="text-align: center;color: rgba(30,30,30,0.3);line-height: 60rpx;">
				暂时还没有新单哦！
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				// 设计师首页
				architectData: [],
			}
		},
		onReady() {

		},
		// 触底触发
		onReachBottom() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(() => {
				this.getTakeOrders(1, 10)
			}, 100);
		},
		onLoad() {
			this.type = this.$cache.get('type')
			this.getTakeOrders(1, 10)
		},
		methods: {
			// 立即接单
			randomTask(id, userNick, userAvatar) {
				uni.navigateTo({
					url: '../../../pages/information/User-Chat?id=' + id + '&title=' + userNick + '&type=' + 1 +
						'&myName=' + this.$cache.get('name') +
						'&myIcon=' + this.$cache.get('avatar') + '&avatar=' + userAvatar +
						'&sendId=' + id
				})
				console.log(this.architectData, '打我达瓦达瓦大我达瓦达瓦大我')
			},
			// 设计师接单
			getTakeOrders(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.takeOrders(data).then((res) => {
					// this.architectData = res.data.result.list
					if (num == 1) {
						this.architectData = res.data.result.list
					} else {
						this.architectData = this.architectData.concat(res.data.result.list)
					}
					console.log('寻找设计师', this.architectData)
					this.mescroll.endBySize(res.data.result.list.length, res.data.result
						.total);
					// 关闭下拉
					uni.stopPullDownRefresh();
					console.log('寻找设计师1', this.architectData)
				})
			},
			toMission() {
				this.$tools.goPageNoAuth('/pages/information/gpt')
			},
		}
	}
</script>

<style scoped>
	/* 设计师首页 */
	.status {
		color: rgba(30, 30, 30, 0.3);
		font-size: 16rpx;
		width: 118rpx;
		height: 24rpx;
		background: rgba(0, 136, 255, 0.12);
		border-radius: 12rpx;
		text-align: center;
		line-height: 24rpx;
		padding: 0 5rpx;
	}

	.reservationOne {
		background-color: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		height: 262rpx;
	}

	.bePresent {
		width: 232rpx;
		height: 88rpx;
		color: #fFFFFF;
		background: #492D22;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		padding: 24rpx;
		margin: auto 0;
	}

	/* GPT */
	.process {
		position: fixed;
		width: 258rpx;
		height: 106rpx;
		background: #c3bfbf;
		border-radius: 63px;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px rgba(214, 214, 214, 0.5);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 80rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 180rpx;
		/*  #endif */
	}
</style>
